<?php
use yii\helpers\Url;
?>

<div style="background: #2DAD5E;text-align: center;height: 2rem;line-height: 2rem;color: #fff">

    <p>厨房垃圾回收登记</p>

</div>


<br>
<form action="<?=Url::to(['site/create-order'])?>" method="post">
    <input name="_csrf-frontend" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
    <input name="list[1][cate]" value="2" type="hidden">
    <div class="weui-cells">
        <div class="weui-cell" style="position: relative">
            <div class="weui-cell__hd" style="width: 25%"><label class="weui-label"><img style="width: 17px;display: inline;position: relative;top:2px" src="/assets/img/our.png">户号</label></div>
            <div class="weui-cell__bd" >
                <input class="weui-input" id="customerId" name="customerId" placeholder="请输入户号或点击扫描">
                <img src="/assets/img/scan.png" style="width: 1.3rem;position: absolute;top:0.5rem;right: 0.1rem">
            </div>
        </div>
    </div>
    <br />
        <a href="javascript:;" id="add" style="background: #2DAD5E;width: 90%" class="weui-btn weui-btn_primary">添加</a>
    <div id="customerList"></div>
    <script>
        $("#add").click(function () {
            var id= $("#customerId").val();
            $.ajax({
                url:"<?=Url::to(['site/get-customer-info'])?>",
                data:"customerId="+id,
                type:'post',
                dataType:"json",
                success:function (data) {
                    if(data.status){
                        var dom = " <div><div class=\"weui-cells\">\n" +
                            "        <a class=\"weui-cell weui-cell_access\" href=\"javascript:;\">\n" +
                            "            <div class=\"weui-cell__bd\" style=\"overflow: hidden\">\n" +
                            "                <p><img style=\"width: 17px;display: inline;position: relative;top:2px\" src=\"/assets/img/address.png\">\n" +
                            data.info.realname+" "+data.info.address+
                            "                    </p>\n" +
                            "            </div>\n" +
                            "            <div class=\"weui-cell__ft\">\n" +
                            "            </div>\n" +
                            "        </a>\n" +
                            "    </div>\n" +
                            "    <div class=\"weui-form-preview info_cell\" style=\"display:none\" > \n" +
                            "        <div class=\"weui-form-preview__hd\">\n" +
                            "            <label class=\"weui-form-preview__label\">户主姓名</label>\n" +
                            "            <em class=\"weui-form-preview__value\">"+data.info.realname+"</em>\n" +
                            "        </div>\n" +
                            "        <div class=\"weui-form-preview__bd\">\n" +
                            "            <div class=\"weui-form-preview__item\">\n" +
                            "                <label class=\"weui-form-preview__label\"><img style=\"width: 17px;display: inline;position: relative;top:2px\" src=\"/assets/img/tel.png\">电话</label>\n" +
                            "                <span class=\"weui-form-preview__value\" >"+data.info.phone+"</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"weui-form-preview__item\">\n" +
                            "                <label class=\"weui-form-preview__label\"><img style=\"width: 17px;display: inline;position: relative;top:2px\" src=\"/assets/img/address.png\">住址</label>\n" +
                            "                <span class=\"weui-form-preview__value\" >"+data.info.address+"</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"weui-form-preview__item\">\n" +
                            "                <label class=\"weui-form-preview__label\"><img style=\"width: 17px;display: inline;position: relative;top:2px\" src=\"/assets/img/blue.png\">蓝积分</label>\n" +
                            "                <span class=\"weui-form-preview__value\" >"+data.info.blue+"</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"weui-form-preview__item\">\n" +
                            "                <label class=\"weui-form-preview__label\"><img style=\"width: 17px;display: inline;position: relative;top:2px\" src=\"/assets/img/green.png\">绿积分</label>\n" +
                            "                <span class=\"weui-form-preview__value\" >"+data.info.green+"</span>\n" +
                            "            </div>\n" +
                            "\n" +
                            "        </div>\n" +
                            "\n" +
                            "    </div>" + "<input name=\"customer[]\" type='hidden' value='"+data.info.id+"'></div>";
                            $("#customerList").append(dom)
                    }else{
                        alert(data.msg);
                    }
                }
            })
        })
        
        $("div").on("click",".weui-cell_access",function () {

            $(this).parent().parent().find(".info_cell").toggle();
        })
    </script>

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd" style="width: 25%"><label class="weui-label"><img style="width: 17px;display: inline;position: relative;top:2px" src="/assets/img/tong.png">数量</label></div>
        <div class="weui-cell__bd">
            <a href="javascript:;" value="0.2" style="width: 15%;text-align: center;padding: 0" class="weui-btn weui-btn_mini weui-btn_default number" >1/5</a>
            <a href="javascript:;" value="0.4" style="width: 15%;text-align: center;padding: 0" class="weui-btn weui-btn_mini weui-btn_primary number" >2/5</a>
            <a href="javascript:;" value="0.6" style="width: 15%;text-align: center;padding: 0" class="weui-btn weui-btn_mini weui-btn_primary number">3/5</a>
            <a href="javascript:;" value="0.8" style="width: 15%;text-align: center;padding: 0" class="weui-btn weui-btn_mini weui-btn_primary number">4/5</a>
            <a href="javascript:;" value="1" style="width: 15%;text-align: center;padding: 0" class="weui-btn weui-btn_mini weui-btn_primary number">5/5</a>
            <input type="hidden" id="number" value="0.2" name="list[1][number]" />
        </div>
        <div class="weui-cell__ft">
            <span class="weui-vcode-btn" style="color: #000">桶</span>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd" style="width: 25%"><label class="weui-label"><img style="width: 17px;display: inline;position: relative;top:2px" src="/assets/img/score.png">质量</label></div>
        <div class="weui-cell__bd" >
            <div id="star"></div>
        </div>
    </div>
</div>
</form>
<br/><br/>
<div style="width: 100%;border:1px solid #cecece;height:10rem;text-align: center;line-height: 12rem;background: #fff">
    <img src="/assets/img/photo.png" style="width: 20%">
</div>
<br>
<a href="javascript:;" id="submit" style="background: #2DAD5E" class="weui-btn weui-btn_primary">下一步</a>

<script>
    $(".number").click(function(){
        var val=$(this).attr("value");
        $("#number").val(val);
        $(".number").removeClass("weui-btn_default");
        $(".number").addClass("weui-btn_primary");
        $(this).removeClass("weui-btn_primary");
        $(this).addClass("weui-btn_default");
    })
    $("#submit").click(function(){
 //       window.location.href="<?=Url::to(['site/success'])?>";
        var number = $("#barrel").val();
        if(number==''){
            $.alert("请填写数量!");
            return ;
        }
        $("form").submit();
    })
    $(function () {
        $('#star').raty({
            number : 5,//星星个数
            path : '/lib/img',//图片路径
            half:false,
            starOn : 'star-on.png',
            starOff : 'star-off.png',
            width:"100%",
            scoreName:'list[1][score]',
        });

    })
    $("#barrel").change(function(){

       var num = $(this).attr("data-values");
        $("#number").val(num);

    })
    $("#barrel").select({
        title: "请选择垃圾数量",
        items: [
            {
                title: "1/5桶",
                value: "0.2",
            },
            {
                title: "2/5桶",
                value: "0.4",
            },
            {
                title: "3/5桶",
                value: "0.6",
            },
            {
                title: "4/5桶",
                value: "0.8",
            },
            {
                title: "5/5桶",
                value: "1",
            },

        ]
    });
</script>